<template>
  <div class="update">
    <div class="left">
      <!-- <div class="checkAll">
        <el-checkbox v-model="checkAll" @change="handleCheckAllChange">当前页</el-checkbox>
      </div> -->
    </div>
    <div class="right">
      <el-button :disabled='checkAll.length == 0' class="btn" @click="batchDownload" v-auth="'BATCH_DOW'">批量下载</el-button>
      <el-button :disabled='checkAll.length == 0' class="btn" @click="batchDelete" v-auth="'BATCH_DEL'">批量删除</el-button>
      <el-button :disabled='checkAll.length == 0' class="btn" @click="batchFinish" v-auth="'BATCH_END'">批量结束</el-button>
      <el-button type="primary" class="btn last" @click="newLiveCode" v-auth="'NEW_CODE'">新建活码</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, withDefaults, defineProps, onBeforeUnmount } from "vue";
import router from "@/router";
import bus from "@/utils/bus";
const emit = defineEmits(["batchDownload", "batchFinish", "batchDelete", "newLiveCode"]);
const checkAll = ref([]);

const props = withDefaults(
  defineProps<{
    isEdit: boolean;
  }>(),
  {
    isEdit: false,
  }
);
// 全选
const handleCheckAllChange = () => { };
// 批量下载
const batchDownload = () => {
  emit("batchDownload");
};
//批量删除
const batchDelete = () => {
  emit("batchDelete");
};
//批量结束
const batchFinish = () => {
  emit("batchFinish");
};
//新建活码
const newLiveCode = () => {
  emit("newLiveCode");
};
const isCheckAll = (data: any) => {
  checkAll.value = data;
};
bus.on("isCheckAll", isCheckAll);
onBeforeUnmount(() => {
  bus.off("isCheckAll", isCheckAll);
});
</script>

<style scoped lang="scss">
.update {
  width: 100%;
  padding: 10px 0 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;

  .left {
    display: flex;
    align-items: center;

    .checkAll {
      padding: 0px 12px;
      background: #f9f9f9;
      border-radius: 1px;
      border: 1px solid #eaeaea;
    }

    .updateTime {
      font-size: 14px;
      font-weight: 300;
      color: #33302d;
      line-height: 14px;
      margin-left: 28px;
    }
  }

  .right {
    display: flex;

    // .btn {
    //   padding: 11px 12px;
    //   background: #ffffff;
    //   border-radius: 4px;
    //   border: 1px solid #ff6b00;
    //   color: #ff6b00;
    //   cursor: pointer;
    //   margin-left: 14px;
    // }
    .last {
      color: #fff;
      border: 1px solid #ff6b00;
      background: #ff6b00;
    }
  }
}
</style>
